const path = require('path')
//引入webpack 启用热重载第二步
const webpack = require('webpack')
//导入在内存中生成页面的插件 （只要是插件，一定要放在plugin节点中）
//这个插件的两个作用：
// 1. 自动在内存中根据指定页面，生成一个内存页面
// 2. 自动把打包好的bundle.js 追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin')

// Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
const VueLoaderPlugin = require('vue-loader/lib/plugin');




//这个配置文件 其实就是一个js文件 通过Node中的模块操作，向外暴露了一个配置对象
module.exports = {
    entry: path.join(__dirname, '/src/main.js'), // 入口 表示要使用 webpack 打包的文件
    output: { // 输出文件相关的配置
        path: path.join(__dirname, '/dist'), // 指定打包好的文件目录
        filename: 'bundle.js'
    },
    devServer: { //这是配置dev-server 命令参数的第二种形式
        open: true, //自动打开浏览器
        port: 3003, //设置启动时的运行端口
        contentBase: 'src', //指定托管的根目录
        hot: true,   //启动热重载第一步
        // proxy: {
        //     "/api": {
        //         target: "https://api.it120.cc/b16a7808b6a4205a089400a9d778d4f6",
        //         changeOrigin: true,
        //         pathRewrite: {
        //             '^/api':''
        //         }
        //     }
        // }
    },
    plugins: [  //配置插件节点
        new webpack.HotModuleReplacementPlugin(),   //new 一个热重载的模块对象 启动热重载第三部
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        }),
        new VueLoaderPlugin()  

    ],
    module: {   //配置所有第三方模块加载器
        rules: [    //所有第三方模块处理规则
            { test: /\.css$/, use: ['style-loader','css-loader'] },    //配置处理.css文件的第三方loader规则
            { test: /\.less$/, use: ['style-loader','css-loader','less-loader'] },   //配置处理.less文件的第三方loader规则
            { test: /\.scss$/, use: ['style-loader','css-loader','sass-loader'] },   //配置处理.scss文件的第三方loader规则
            { test: /\.(jpg|jpeg|gif|png|bmp)$/, use: 'url-loader?limit=40330&name=[hash:8]-[name].[ext]' },     //配置图片文件的第三方loader  固定参数 limit: 限制转码（base64）图片的字节大小  name: [hash:8] 防止同名文件冲突 [name] 以原图片名命名 [ext] 使用原图片格式
            { test:/\.(ttf|woff|woff2|eot|svg)$/, use: 'url-loader' },    //处理字体文件
            { test:/\.js$/,use: 'babel-loader', exclude:/node_modules/ },  //配置babel处理高级语法
            { test:/\.vue$/,use: 'vue-loader'}  //配置处理.vue的文件
        ]
    },
    resolve: {
        alias: {    //修改vue导入的路径
            "vue$": "vue/dist/vue.js"
        }
    }
}